<template>
  <div class="orderForm">
    <el-table v-loading="pageLoading" class="red-header" :data="tableData" style="width: 100%">
      <el-table-column prop="createTime" label="日期"></el-table-column>
      <el-table-column prop="total" label="物资品类">
        <template slot-scope="{ row }">
          {{ ' ' + row.total + ' ' }}类
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="goDetail(row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="采购单详情"
      :visible.sync="detailVisible"
      top="10vh"
      width="1000px"
      @close="closeDialog"
      append-to-body
    >
      <div class="main">
        <div class="numadd">
          <div class="num">
            采购日期：<span>{{ detailObj.createTime }}</span>
          </div>
          <div>采购店铺：<span>{{ data.barCounterRegion }}</span></div>
        </div>
        <el-table v-loading="pageLoadsing" class="red-header" :data="detailObj && detailObj.data && detailObj.data.list" style="width: 100%">
          <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
          <el-table-column prop="materialName" label="采购名称"></el-table-column>
        </el-table>
        <pagination
          v-show="detailObj && detailObj.data && detailObj.data.total > 0"
          :total="detailObj && detailObj.data && detailObj.data.total"
          :page.sync="pageQuery.pageNum"
          :limit.sync="pageQuery.pageSize"
          @pagination="getBarPurchaseId()"
        />
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import * as api from "@/api/shop/index";
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination
  },
  props: {
    pageLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    barCounterId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      detailVisible: false,
      pageLoadsing: false,
      detailObj: {},
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      createTime: ''
    };
  },
  methods: {
    async goDetail(record) {
      this.detailVisible = true
      this.detailObj.createTime = record.createTime
      setTimeout(() =>{
        this.pageLoadsing = true
        this.getBarPurchaseId()
      }, 1000)
    },
    async getBarPurchaseId() {
      await api.barPurchaseId({barCounterId: this.$props.barCounterId, time: this.detailObj.createTime, ...this.pageQuery}).then(res => {
        this.detailObj.data = res
        this.pageLoadsing = false
      })
      console.log(this.detailObj, '=============>rtes')
    },
    closeDialog() {
      this.detailVisible = false
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .red-header .el-table__header th {
  background-color: rgb(242, 243, 245);
  color: #000; /* 可选：为了确保文字颜色与背景对比度良好，可以设置文本颜色为白色 */
}
.numadd {
  display: flex;
  margin-bottom: 50px;
  .num {
    margin-right: 200px;
  }
}
</style>